<template>
  <div class="tab">
    <section>
      坐标：<span class="txt">({{ x }}，{{ y }})</span>
    </section>
    <section>
      宽：真实/显示<span class="txt">({{ props.truthForRate }})</span>
    </section>
    <section>
      角度：<span class="txt">{{ angle }}°</span>
    </section>
    <section>
      混轮：<span class="txt">{{ onwheelLen }}</span>
    </section>
    <section>
      移动：<span class="txt">({{ mx }}，{{ my }})</span>
    </section>
    <section>
      倍数：<span class="txt">{{ showRate }}</span>
    </section>
    <section class="control">
      <el-button size="small" type="primary" :icon="Refresh" @click="reset">恢复</el-button>
      <el-button size="small" type="danger" :icon="Place" @click="mark">标记</el-button>
    </section>
    <div class="b-container">
      <el-space>
    <span>
      模式
    </span>
        <el-switch
            @change="changePattern"
            v-model="pattern"
            inline-prompt
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            active-text="预览"
            inactive-text="编辑"/>
      </el-space>
    </div>
    <div class="b-container">
      <el-space>
    <span>
     底图
    </span>
        <el-upload
            class="avatar-uploader"
            :action="action"
            :headers="headers"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
          <el-icon v-else class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>
      </el-space>
    </div>
    <div style="margin-top:10px;">
      <el-space>
        <span>退出</span>
        <el-button size="small" type="primary" @click="logout">退出</el-button>
      </el-space>
    </div>
  </div>
</template>

<script setup>

import {ref, watch} from 'vue'
// 底图
import {Place, Plus, Refresh} from '@element-plus/icons-vue'
import {ElMessageBox} from 'element-plus'
import usePatternStore from "@/store/pattern";
import useAdminStore from "@/store/admin.js";

const usePattern = usePatternStore()
const useAdmin = useAdminStore()
const changePattern = (e) => {
  if (e) {
    usePattern.setPattern("view")
  } else {
    usePattern.setPattern("edit")
  }
}
// 模式为true是表示view，false表示edit
const pattern = ref(true)


// 底图上传
const handleAvatarSuccess = async (file) => {
  imageUrl.value = file.path
  await useAdmin.setBgImg(file.path)
  await emits("changeBgImg")
  await emits('init')
}
const beforeAvatarUpload = () => {
}
const headers = {
  Authorization: "Bearer " + useAdmin.getToken()
}
// 如果是开发环境取本地的，如果是生产环境取服务器的
const baseUrl = import.meta.env.VITE_MODE === "development" ? import.meta.env.VITE_BASE_URL : "http://map.xiaohongpao.top"
const action = ref(baseUrl + '/api/upload')
const imageUrl = ref('')
// 定义一个props,放大倍数，默认数值为0
const props = defineProps({
  truthForRate: {
    type: Number,
    default: 0
  },
  rate: {
    type: Number,
    default: 0
  },
  x: {
    type: Number,
    default: 0
  },
  y: {
    type: Number,
    default: 0
  },
  angle: {
    type: Number,
    default: 0
  },
  mx: {
    type: Number,
    default: 0
  },
  my: {
    type: Number,
    default: 0
  },
  onwheelLen: {
    type: Number,
    default: 0
  },
})
const showRate = ref(0)
// 计算属性，对props中的rate保留3为小数
watch(() => props.rate, (newVal) => {
  showRate.value = newVal.toFixed(3)
})
const emits = defineEmits(['resetSize', 'init', 'changeBgImg'])
const reset = () => {
  // 调用这个方法，触发父组件中的resetSize方法
  emits('resetSize')
}
const mark = () => {
  if (usePattern.modal !== "edit") {
    ElMessageBox.alert("请先切换到编辑模式", "提示", {
      confirmButtonText: "确定",
      callback: action => {
      }
    })
  }

  let img = document.querySelector("#img")
  img.style.cursor = "crosshair"
}
const logout = () => {
  useAdmin.logout()
}
</script>

<style lang="scss" scoped>
.avatar-uploader {
  background-color: white;
}
.avatar{
  width: 178px;
  height: 178px;
}
.avatar-uploader .el-upload {
  background-color: whitesmoke;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.tab {
  border-radius: 4px;
  box-sizing: border-box;
  padding: 10px;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 50px;
  right: 50px;
  width: 220px;
  font-size: 12px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 12px 0px;

  .txt {
    font-size: 8px;
  }
}
</style>